﻿@{
    ViewBag.Title = "For5";
}

<ul data-bind="foreach: { data: categories, as: 'category' }">
    <li>
        <ul data-bind="foreach: { data: items, as: 'item' }">
            <li>
                <span data-bind="text: category.name"></span>: 
                 <span data-bind="text: item"></span>
            </li>
        </ul>
    </li>
</ul>

<script>
    var viewModel = {
        categories: ko.observableArray([
            { name: '水果', items: ['苹果', '橘子', '香蕉'] },
            { name: '蔬菜', items: ["芹菜", "玉米", "菠菜"] }
        ])
    };
    ko.applyBindings(viewModel);
</script>
